前面提到的單元測試和組件測試用於檢查個別的類別、函式或組件。它們並不會檢查系列操作，也無法捕捉真實情境運行的效能。而「整合測試」主要用於驗證程式的系列行為是否符合預期。這種測試通常也稱為「端到端測試」。

Flutter SDK 中包含了 integration_test 套件。integration_test 是 Flutter 團隊開發的新一代整合測試框架。flutter_driver 也是官方開發的，但現在被視為較舊的解決方案。

為了讓我們對於整體有完整的了解，我們將進一步學習 integration_test 以及 Appium。讓我們後續在對於整合測試的選擇有更完整的概念。

使用 integration_test

接著，讓我們來初步看看如何使用 integration_test 搭配 flutter drive 指令執行測試。看看 Firebase Test Lab 透過各種裝置和設定測試應用程式。

建立新專案

整合測試需要針對一個應用程式測試，這裡我們使用預設的計算器範例。

$ flutter create counter_demo

開啟專案至 lib/main.dart ，在 floatingActionButton 加入 Key

floatingActionButton: FloatingActionButton(
  key: const ValueKey('increment_counter_button'), // <- 這裡
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

安裝 integration_test

$ flutter pub add 'dev:integration_test:{"sdk":"flutter"}'

之後建立 integration_test 目錄，並加入 app_test.dart 檔案

counter_app/
  lib/
    main.dart
  integration_test/
    app_test.dart

撰寫測試案例

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:counter_demo/main.dart';
import 'package:integration_test/integration_test.dart';

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('端對端測試', () {
    testWidgets('點擊浮動按鈕，驗證計數器', (tester) async {
      // 載入應用程式組件
      await tester.pumpWidget(const MyApp());

      // 驗證計數器初始值為 0
      expect(find.text('0'), findsOneWidget);

      // 找到浮動按鈕
      final button = find.byKey(const ValueKey('increment_counter_button'));

      // 模擬點擊浮動按鈕
      await tester.tap(button);

      // 觸發刷新一幀
      await tester.pumpAndSettle();

      // 驗證計數器增加 1
      expect(find.text('1'), findsOneWidget);
    });
  });
}

執行整合測試

要執行整合測試需要根據測試的平台或系統而有所差異。例如

• 測試桌機應用程式可以使用指令或 CI
• 測試行動裝置應用程式可以使用指令或者 Firebase Test Lab
• 測試網頁可以使用指令

例如在 macOS 中我們可以執行

$ flutter test integration_test/app_test.dart

如果是行動裝置應用的測試我們則需要先連線裝置。然後執行上面指令。網頁的話我們還需要安裝 ChromeDriver

$ npx @puppeteer/browsers install chromedriver@stable
$ mkdir test_driver

端對端框架比較

端對端測試(E2E Testing)，這種測試是指從使用者角度對系統進行測試，也就「人工測試」的主要範圍。

雖然系列文章我們主要是探討 Flutter ，但這裡我們希望額外帶出更多知識。畢竟，我們選擇 Flutter 就是因為其跨平台解決方案的特點。下面是各主流平台和框架的 E2E 測試工具彙整：

• 網頁：Puppeteer、Selenium
• iOS：XCUITest(官方)、EarlGrey
• Android：Espresso(官方)、UI Automator
• React Native：React Native Testing Library(官方推薦)、Detox
• Flutter：integration_test， flutter_driver
• macOS：XCTest
• Electron：Spectron(官方)

而 Appium 為跨平台 E2E 自動化測試工具除了平台支援 iOS、Android、Windows、macOS、網頁、React Native、tvOS 等等，撰寫語言支援 Java、Python、JavaScript、C#、Ruby。

初識 Appium

Appium 是開源工具，主要應用於 mobile app，也支援 Web、Desktop App、及 TV (像是 tvOS, Android TV) 使自動化更加容易

概念

網頁領域中的爬蟲先驅 Selenium 主要應用在網頁爬蟲或自動化上，他們依照 W3C WebDriver Specification (https://w3c.github.io/webdriver/) 並在長期開發下產出穩定的 API 與工具。主流的瀏覽器也都包含了這個 Spec。Appium 則是以行動裝置應用程式為目標，他們在技術實現上也以 W3C WebDriver spec 為主。

不同裝置的技術實現不一樣，但像點擊事件在網頁與手機非常相似（但還是不一樣），因此 Spec 提供了共用的介面像是找尋元素(find element)或是與元素互動(tap, setValue)的方法，讓我們可以近乎達到寫一次的程式，應用在不同的平台。

const element = await driver.$('//*[@text="Foo"]');
await element.click();
console.log(await element.getText())
console.log(await driver.getPageSource())

總結

這裡我們主要還是聚焦在 Flutter 官方的整合測試介紹，並提出一個可能可以更廣泛使用的解決方案。後續我們可以依據自己的需求，觀點選擇適合自己的解決方案。